<template>
  <div ref="oScrollBox" class="scroll-box">
    <van-pull-refresh v-model="refresh" @refresh="onRefresh">
      <div ref="oInnerList" class="inner-list">
        <slot></slot>
        <div ref="oBottomTip" class="bottom-tip"></div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: 'ScrollBox',
  props: {
    finshed: { type: Boolean, default: false } //  判断是否
  },
  data() {
    return {
      refresh: false
    }
  },
  emits: ['refresh', 'load'],
  mounted() {
    const root = this.$refs.oScrollBox; //  可视区域 根元素
    const mark = this.$refs.oBottomTip; //  标记位元素
    const inner = this.$refs.oInnerList;

    //  获取根元素的可视化高度
    const clientH = root.clientHeight;
    inner.style.minHeight = clientH + 'px';

    // 创建监听
    const intersectionObserver = new IntersectionObserver(
      entries => {
        for (var entry of entries) {
          if (!this.finshed) {
            //  进入才会触发，离开不会
            //  与目标元素的交叉比例 1 完全交叉 一般一半即可
            if (entry.intersectionRatio > 0.3) {
              //  根据交叉结果判断是否需要加载更多数据
              this.$emit('load', () => {})
            }
          }
        }
      },
      {
        root
      }
    )

    //  监听元素 - 监听元素是否出现在可视化区域内
    intersectionObserver.observe(mark)
  },
  methods: {
    onRefresh() {
      //  利用回调函数处理
      this.$emit('refresh')
      this.refresh = false;
    }
  }
}
</script>

<style lang="scss" scoped>
:deep .van-pull-refresh {
  // height: 100%;
}

.scroll-box {
  overflow-y: auto;
  .inner-list {
  }

  .bottom-tip {
    height: 5px;
  }
}
</style>
